<template>
  <div id="d1"><h1>按个摩</h1></div>
  <van-swipe class="my-swipe" :autoplay="3000">
    <van-swipe-item v-for="(item, index) in SwipeList" :key="'diao' + index">
      <van-image class="image" fit="fill" :src="item.img" />
    </van-swipe-item>
  </van-swipe>
  <van-notice-bar
    left-icon="volume-o"
    text="本店周年庆!!!~ 全场8.9折!!!~ 支持中国，我爱中国。杜绝赌、毒！！！本店周年庆!!!~ 全场8.9折!!!~ 支持中国，我爱中国。杜绝赌、毒"
  />
  <img class="imga" :src="guanggao" alt="" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import axios from 'axios';
// 广告图
const guanggao = ref(require("../../assets/guanggaotu/guanggao.jpg"));
// 轮播图列表
const SwipeList = ref<any>([]);
(async ()=> {
  let res = await axios.get("http://localhost:8877/banner")
  // console.log(res.data);
  SwipeList.value = res.data
})()
</script>

<style scoped lang="scss">
.my-swipe .van-swipe-item {
  height: 250px;
  width: 100%;
  text-align: center;
  background-color: #39a9ed;
  .image {
    height: 300px;
  }
}

.imga {
  width: 100%;
  height: 100px;
}

#d1 {
  color: #fff;
  text-align: center;
  font: 300 30px/80px "";
  width: 100%;
  height: 80px;
  background-image: linear-gradient(
    30deg,
    rgb(182, 159, 200),
    rgb(188, 43, 137),
    rgb(196, 211, 87)
  );
}
</style>
